<template>
  <div>
    <el-breadcrumb>
      <el-breadcrumb-item
        :to="{ path: '/survey' }"
      >备案管理</el-breadcrumb-item>
      <el-breadcrumb-item>详情</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="cad-box" style="margin: 20px 0; padding-top: 0px">
      <div style="width: 100%; margin-top: 40px">
        <div class="obj_title">基本信息</div>
        <div class="obj_box">
          <div style="width: 100%">
            <div style="display: flex; align-items: center">
              <div><span style="color: red">*</span> 调研模版名称：</div>
              <div style="width: 400px">
                <el-input
                  v-model="ruleForm.name"
                  :disabled="!isdisabled"
                  placeholder="暂无信息"
                  style="width: 100%"
                />
              </div>
            </div>
          </div>
        </div>
        <div class="obj_box">
          <el-table v-loading="loading" :data="tableData" style="width: 100%">
            <el-table-column prop="name" label="名称" align="center" />
            <el-table-column prop="type" label="类型" align="center">
              <template slot-scope="scope">
                {{
                  typeOption.find((item) => item.value === scope.row.type).label
                }}
              </template>
            </el-table-column>
            <el-table-column prop="value" label="值" align="center">
              <template slot-scope="scope">
                <el-upload
                  v-if="scope.row.type === 4"
                  class="upload-demo"
                  action="/api/system/upload"
                  :auto-upload="true"
                  :on-success="
                    (response, file, fileList) =>
                      handleSuccess(response, file, fileList, scope)
                  "
                  :on-preview="onPreview"
                  :on-remove="handleRemove"
                  :before-remove="beforeRemove"
                  multiple
                  :file-list="scope.row.fileList"
                  :disabled="!isdisabled"
                >
                  <el-button size="small" type="primary">点击上传</el-button>
                </el-upload>
                <el-checkbox-group
                  v-if="scope.row.type === 3"
                  v-model="scope.row.checkSumList"
                  :disabled="!isdisabled"
                  @change="(val) => handleCheckChange(val, scope)"
                >
                  <el-checkbox
                    v-for="(item, index) in scope.row.checkList"
                    :key="index"
                    :label="item"
                  />
                </el-checkbox-group>
                <el-input
                  v-if="scope.row.type === 0"
                  v-model="scope.row.value"
                  placeholder="请输入"
                  :disabled="!isdisabled"
                />
                <el-input
                  v-if="scope.row.type === 1"
                  v-model="scope.row.value"
                  placeholder="请输入"
                  type="textarea"
                  :disabled="!isdisabled"
                />
                <el-radio-group
                  v-if="scope.row.type === 2"
                  v-model="scope.row.selectValue"
                  :disabled="!isdisabled"
                  @change="(val) => handleRadioChange(val, scope)"
                >
                  <el-radio
                    v-for="(item, index) in scope.row.radioList"
                    :key="index"
                    :label="item"
                  >{{ item }}</el-radio>
                </el-radio-group>
              </template>
            </el-table-column>
            <el-table-column prop="content" label="内容" align="center">
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.content"
                  placeholder="请输入"
                  type="textarea"
                  :disabled="!isdisabled"
                />
              </template>
            </el-table-column>
            <el-table-column prop="remark" label="备注" align="center">
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.remark"
                  placeholder="请输入"
                  type="textarea"
                  :disabled="!isdisabled"
                />
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
    <div
      v-if="isdisabled"
      class="cad-box"
      style="margin: 20px 0; padding-top: 0px"
    >
      <div
        style="
          width: 100%;
          margin-top: 40px;
          display: flex;
          justify-content: space-evenly;
        "
      >
        <el-button type="warning" @click="handleSubmit">提交</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getByContentId, getByAreaId, researchTemplateAreaEdit } from './api'
export default {
  data () {
    return {
      ruleForm: {
        name: ''
      },
      loading: false,
      isdisabled: true,
      tableData: [],
      typeOption: [
        {
          value: 0,
          label: '短文本'
        },
        {
          value: 1,
          label: '长文本'
        },
        {
          value: 2,
          label: '单选'
        },
        {
          value: 3,
          label: '多选'
        },
        {
          value: 4,
          label: '附件'
        },
        {
          value: 0,
          label: '富文本'
        }
      ],
      typeValue: ''
    }
  },
  computed: {
    ...mapGetters(['curArea', 'user'])
  },
  created () {
    const { id, type } = this.$route.query
    this.idS = id
    this.typeValue = type
    if (type === 'info') {
      this.isdisabled = false
    }
    this.handleGetByContentId()
  },
  mounted () {},
  methods: {
    onPreview (file) {
      window.open(file.url, '_blank')
    },
    handleRadioChange (val, scope) {
      console.log(val, scope)
      // scope.row.value=
    },
    async handleSubmit () {
      console.log(this.tableData, 'handleSubmit')
      this.tableData.map((item) => {
        item.areaId = this.curArea.id
        return item
      })
      await researchTemplateAreaEdit({
        id: this.idS,
        areaList: this.tableData
      })
      this.$message.success('编辑成功')
      this.$router.push('/survey')
    },
    handleRemove (file, fileList) {
      console.log(file, fileList)
    },
    handleSuccess (response, file, fileList, scope) {
      file.url = response.data.url // 手动设置文件的 URL
      scope.row.fileList = fileList // 更新 fileList
      scope.row.value = JSON.stringify(fileList)
    },
    handleExceed (files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      )
    },
    beforeRemove (file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`)
    },
    handleCheckChange (val, scope) {
      scope.row.selectValue = JSON.stringify(val)
    },
    async handleGetByContentId () {
      let api = getByContentId(this.idS)
      if (this.typeValue === 'info') {
        api = getByAreaId({
          id: this.idS,
          areaId: this.curArea.id
        })
      }
      // 选择框( 0 短文本，1 长文本，2 单选，3 多选，4 附件，5 富文本) 默认 2,可用值:0,1,2
      const res = await api
      this.ruleForm = res
      if (this.typeValue === 'info') {
        this.tableData = res.areaList.map((item) => {
          if (item.type === 2) {
            item.radioList = item.value.split(';;')
            this.$set(item, 'selectValue', item.selectValue)
          }
          if (item.type === 3) {
            item.checkList = item.value.split(';;')
            this.$set(item, 'checkSumList', JSON.parse(item.selectValue))
            // this.$set(item, "selectValue", []);
          }

          if (item.type === 4) {
            if (this.typeValue !== 'info') {
              this.$set(item, 'fileList', [])
              this.$set(item, 'fileListShow', [])
            } else {
              const itemValue = JSON.parse(item.value)
              const setValue = itemValue.map((item) => {
                return { url: item.url, name: item.name }
              })
              console.log(setValue, 'item.')
              this.$set(item, 'fileList', setValue)
              this.$set(item, 'fileListShow', setValue)
            }
          }
          return item
        })
      }
      if (this.typeValue === 'edit') {
        this.tableData = res.contentList.map((item) => {
          if (item.type === 2) {
            item.radioList = item.value.split(';;')
            this.$set(item, 'selectValue', '')
          }
          if (item.type === 3) {
            item.checkList = item.value.split(';;')
            this.$set(item, 'checkSumList', [])
            this.$set(item, 'selectValue', [])
          }
          if (item.type === 4) {
            this.$set(item, 'fileList', [])
            this.$set(item, 'fileListShow', [])
          }
          return item
        })
      }
    }
  }
}
</script>

<style scoped lang="scss">
::v-deep .el-checkbox__input.is-checked .el-checkbox__inner {
  background-color: #ff8b00 !important;
  border-color: #ff8b00 !important;
}
::v-deep .el-radio__input.is-disabled.is-checked .el-radio__inner {
  background-color: #ff8b00 !important;
  border-color: #ff8b00 !important;
}
::v-deep .el-radio__input.is-disabled + span.el-radio__label {
  color: #ff8b00 !important ;
}
::v-deep .el-checkbox__input.is-disabled + span.el-checkbox__label {
  color: #ff8b00 !important ;
}
::v-deep .el-upload-list__item {
  overflow: inherit;
}
::v-deep .el-form-item {
  margin-bottom: 50px !important;
}
.left-user {
  display: flex;
  justify-content: space-between;
  .left-user-info {
    margin-left: 10px;
    line-height: 30px;

    .name-item {
      font-weight: bold;
    }

    .message-item {
      font-size: 13px;
      color: #808080;
    }
  }
}
.obj_title {
  font-size: 18px;
  font-weight: bold;
}
.obj_box {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 20px;
  .obj_bt_box {
    width: 100%;
    display: flex;
    align-items: center;
    // .box_label {
    // }
    .box_value {
      margin: 30px 0px;
    }
  }
  .obj_item {
    width: 30%;
    padding: 20px 0px;
  }
}
.title-card {
  font-weight: bold;
  margin-bottom: 20px;
}

.flex-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.content-box {
  display: flex;

  .left-message {
    width: 65%;
    padding-right: 150px;

    .demo-ruleForm {
      ::v-deep .el-form-item {
        margin-bottom: 22px;
      }

      .box-border {
        margin-bottom: 30px;
        border-top: 1px solid #ebebee;
      }
    }

    ::v-deep .el-form-item {
      margin-bottom: 55px;
    }
  }
  .right-record {
    flex: 1;
    padding-left: 30px;
    margin-left: 30px;

    ::v-deep .el-card {
      background-color: #f6f8fa;
      border: 1px solid #f6f8fa;
    }
    ::v-deep .is-always-shadow {
      box-shadow: none;
    }

    ::v-deep .el-timeline-item__timestamp {
      color: black;
      font-size: 15px;
    }

    .text-content {
      margin-top: 20px;
      color: #808080;
    }
  }
}
</style>
